<template>
  <div>
    <!--分类列表的头部区域-->
    <el-card class="box-card" shadow="never">
      <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px"></i>
      <span>商品分类列表</span>
      <el-button
        class="btn-add"
        size="mini"
        @click="$router.push('/pm/productCateAdd')"
        >添加</el-button
      >
    </el-card>
    <!-- 分类表格 -->
    <div class="table-container">
      <el-table
        border
        :data="dataList"
        style="width: 100%"
        :height="getHeight()"
        v-loading="isLoading"
      >
        <el-table-column prop="id" label="编号" align="center" width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名称"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column label="级别" align="center" width="100">
          <template slot-scope="scope">
            <!-- | 表示过滤器  对数据进行格式化 -->
            {{ scope.row.parent_id | levelFilter }}
          </template>
        </el-table-column>
        <el-table-column
          prop="product_unit"
          label="数量单位"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column label="移动端显示" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.nav_status"
              :active-value="1"
              :inactive-value="0"
              @change="handleNavStatusChange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.show_status"
              :active-value="1"
              :inactive-value="0"
              @change="handleShowStatusChange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="100">
        </el-table-column>
        <el-table-column label="设置" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleShowNextLeval(scope.$index, scope.row)"
              :disabled="scope.row.parent_id | disableNextLevel"
              >查看下一级</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分类列表的分页区域-->
    <div class="pagination-contaiiner">
      <el-pagination
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        @current-change="handlePageChange"  
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getCategory,
  delCategory,
  updateCategory,
} from "../../../api/categoryApi";
export default {
  data() {
    return {
      parentId: 0, // 0表示一级分类
      pageNum: 1, // 表示第几页
      pageSize: 5, // 一页显示几条数据
      total: 0, // 总记录数
      dataList: [], // 表格的数据源
      isLoading: false, // 表格的loading效果
    };
  },
  created() {
    this.getList();
  },
  watch:{
    $route(){
      this.resetParentId();  // resetParentId  重置parentId
      this.getList(); // parentId变了，重置获取数据
    }
  },
  methods: {
    // 重置parentId
    resetParentId(){
      this.pageNum = 1;
      if(this.$route.query.parentId !== undefined){
        this.parentId = this.$route.query.parentId;
      }else{
        this.parentId = 0;
      }
    },
    // 获取分类数据
    getList() {
      this.isLoading = true;
      getCategory(this.parentId, this.pageNum, this.pageSize).then((res) => {
        console.log(res);
        if (res.status === 1) {
          this.$message.success(res.msg);
          this.isLoading = false;
          this.dataList = res.data.category_list;
          this.total = res.data.category_count;
        }
      });
    },
    // 计算表格的高度
    getHeight() {
      return window.innerHeight - 250;
    },
    // 移动端是否显示
    handleNavStatusChange(index, row) {
      // 参数1：id  参数2：nav_status
      updateCategory({ id: row.id, nav_status: row.nav_status }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 是否启用
    handleShowStatusChange(index, row) {
      updateCategory({ id: row.id, show_status: row.show_status }).then(
        (res) => {
          if (res.status === 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    // 查看下一级
    handleShowNextLeval(index, row) {
      this.$router.push({path:"/pm/productCategory",query:{parentId:row.id}})
    },
    // 点击编辑
    handleUpdate(index, row) {
      this.$router.push({path:"/pm/productCateUpdate",query:{id:row.id}})
    },
    // 点击删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delCategory(row.id).then((res) => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("删除失败");
            }
            this.getList(); // 删除完后，需要重新获取数据源
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击页码
    handlePageChange(val){
      this.pageNum = val;
      this.getList();
    },  
    // 切换一页显示几条数据
    handleSizeChange(val){
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
  },
  filters: {
    // 过滤器也是函数
    levelFilter(value) {
      if (value === 0) {
        return "一级";
      } else {
        return "二级";
      }
    },
    disableNextLevel(value) {
      // 一级分类  value是0   value !== 0  false
      // 二级分类  value不是0   value !== 0  true
      return value !== 0;
    },
  },
};
</script>

<style scoped lang="less">
.btn-add {
  float: right;
}
.table-container {
  margin-top: 20px;
}
.pagination-contaiiner {
  margin-top: 15px;
  float: right;
}
</style>